<script setup lang="ts">
import IconList from './icon.ts'

defineOptions({ name: 'VipIconSelector' })

const emit = defineEmits(['handle-icon'])
const modalVisible = defineModel()
const queryIcon = ref<any>([])

const total = ref<any>(0)
const queryForm = reactive<any>({
  pageNo: 1,
  pageSize: 72,
  title: '',
  colorful: false,
  num: 28
})
const emptyShow = ref<boolean>(false)

const handleSizeChange = (value: number) => {
  queryForm.pageNo = 1
  queryForm.pageSize = value
  fetchData()
}
const handleCurrentChange = (value: number) => {
  queryForm.pageNo = value
  fetchData()
}

const queryData = () => {
  queryForm.pageNo = 1
  fetchData()
}

const handleCopyText = (item: string) => {
  // clip(item)
}

const handleCopyIcon = (item: any) => {
  // clip(`<vab-icon icon="${item}" />`)
  emit('handle-icon', item)
}

const fetchData = async () => {
  // const data = IconList

  const { title, pageNo = 1, pageSize = 72 } = queryForm
  const mockList = IconList.filter((item) => !(title && item.indexOf(title) < 0))
  const list = mockList.filter((_, index) => index < pageSize * pageNo && index >= pageSize * (pageNo - 1))

  queryIcon.value = list.map((icon: any) => {
    // return { icon, color: randomHexColor() }
    return { icon }
  })
  total.value = mockList.length
  emptyShow.value = total.value <= 0
}

onBeforeMount(() => {
  fetchData()
})
</script>

<template>
  <el-dialog
    class="iconSelector-dialog"
    title="图标选择器"
    v-model="modalVisible"
    width="80%"
    top="5vh"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
  >
    <VipQueryForm>
      <VipQueryFormTopPanel>
        <el-form inline label-width="80px" @submit.prevent>
          <el-form-item label="图标名称">
            <el-input v-model="queryForm.title" clearable placeholder="请输入图标名称" />
          </el-form-item>
          <el-form-item>
            <el-button icon="Search" native-type="submit" type="primary" @click="queryData">查询</el-button>
          </el-form-item>
        </el-form>
      </VipQueryFormTopPanel>
    </VipQueryForm>

    <el-empty v-if="emptyShow" class="vip-data-empty" description="暂无数据" />
    <div class="icon-list-wrapper">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in queryIcon" :key="index" :lg="3" :md="4" :sm="6" :xl="3" :xs="6">
          <el-card shadow="never" @click="handleCopyIcon(item.icon)">
            <VipIcon
              :icon="item.icon"
              :style="{
                color: 'var(--el-color-grey)',
                fontSize: queryForm.num + 'px',
                transition: 'var(--el-transition)'
              }"
            />
          </el-card>
          <div class="icon-text">
            {{ item.icon }}
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="icon-page">
      <!--      <el-pagination background layout="prev, pager, next" :total="1000" />-->
      <VipPagination
        background
        :current-page="queryForm.pageNo"
        :page-size="queryForm.pageSize"
        :page-sizes="[72, 144, 216, 288]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.icon-list-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.icon-page {
  flex-shrink: 0;
  border-top: 1px solid var(--el-border-color);
  padding-top: 8px;
}

:deep() {
  .el-card {
    //margin-bottom: var(--el-margin);
    margin-bottom: 20px !important;
  }

  .el-card__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 59.5px;
    max-height: 59.5px;
    padding: calc(var(--el-padding) / 1.4);
    cursor: pointer;

    i {
      font-size: 28px;
      color: var(--el-color-grey);
      text-align: center;
      pointer-events: none;
      cursor: pointer;
      transition: var(--el-transition);
    }

    &::after {
      position: absolute;
      bottom: -30px;
      width: 100%;
      padding: 4px 0;
      font-size: var(--el-font-size-small);
      color: var(--el-color-white);
      text-align: center;
      //content: '复制';
      content: '选择';
      background-color: var(--el-color-primary);
      transition: var(--el-transition);
    }

    &:hover {
      i {
        margin-bottom: calc(var(--el-margin) / 1.2);
      }

      &::after {
        bottom: 0;
      }
    }
  }
}

.icon-text {
  height: 30px;
  margin-top: -15px;
  overflow: hidden;
  font-size: var(--el-font-size-small);
  line-height: 30px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
</style>

<style lang="scss">
.iconSelector-dialog {
  height: 88vh !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .el-dialog__body {
    width: 100%;
    //height: 80%;
    flex: 1;
    display: flex;
    flex-flow: column;
    overflow: hidden;
    //overflow-y: auto;
  }
}
</style>
